import React, { Dispatch, SetStateAction, useState } from "react";
import { Button, Form, Input, Select, Switch } from "antd";
import { CategoryType } from "@/types/course";
import { categoryPost } from "@/api/course";

type SizeType = Parameters<typeof Form>[0]["size"];
type ICateFormProps = {
  cateList: CategoryType[];
  handleCancel:()=>void
  handleCateList:(arg:CategoryType)=>void
};

const CateForm: React.FC<ICateFormProps> = (props) => {
  const onFinish = async(value:CategoryType)=>{
    console.log(value);
    let res = await categoryPost(value) //录入分类
    let {objectId} = res.data
    props.handleCateList({...value,objectId}) //子父通信，实时更新表格数据
    props.handleCancel() //关闭弹窗
  }
  return (
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 19 }}
      layout="horizontal"
      style={{ maxWidth: 600 }}
      onFinish={onFinish}
    >
      <Form.Item label="分类名称" name="name" rules={[{ required: true, message: '请输入类目名称' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="父级类目" name="parentId" rules={[{ required: true, message: '请选择父级类目' }]}>
        <Select>
          <Select.Option value="0-0">顶级类目</Select.Option>
          {props.cateList.map((item) => {
            return (
              <Select.Option value={item.objectId} key={item.objectId}>
                {item.name}
              </Select.Option>
            );
          })}
        </Select>
      </Form.Item>
      <Form.Item label="是否上架" valuePropName="checked" name="isonline" rules={[{ required: true, message: '请选择上架状态' }]}>
        <Switch />
      </Form.Item>
      <Form.Item label=" ">
        <Button type="primary" htmlType="submit">确认</Button>
      </Form.Item>
    </Form>
  );
};

export default CateForm;
